(function () {
    // 初始数据渲染

    let str = '';
    // 执行ajax 获取数据 列表标题渲染
    $.ajax({
        url: "../php/goodsListTit.php",
        success: (res) => {
            const titRes = JSON.parse(res);
            titRes.forEach(element => {
                str += `
                <li data-index="${element.Id}">
                    <a href="javascript:;">${element.tit}</a>
                </li>`;
            });
            $(".content_left_list").html(str);
        }
    });

    // 绑定点击事件
    $(".content_left_list").delegate("a", "click", function () {
        $.each($(".content_left_list").children("li"), function () {
            $(".content_left_list").children("li").removeClass();
        })
        
        // 显示元素
        $(this).parent().addClass("active");
        // 点击商品分类列表 隐藏商品详情
        $(".shop_n").css("display","none");
        $(".content_con_r_con").css("display","block");
        $(".slide-con").css("display","block");
        $(".paging").css("display","block");
        let i = parseInt($(this).parent().attr("data-index"))
        // 暴露点击索引
        window.i = i;
        index(ajax,i);
    });
    
    // 根据点击索引渲染相应页面
    function index(fn,idx) {
        if (fn === "getData") fn = getData;
        switch (idx) {
            case 1:
                fn("../php/brackets.php");
                break;
            case 2:
                fn("../php/pincers.php");
                break;
            case 3:
                fn("../php/accessories.php");
                break;
            case 4:
                fn("../php/buccal.php");
                break;
            case 5:
                fn("../php/band.php");
                break;
            case 6:
                fn("../php/silk.php");
                break;
            case 7:
                fn("../php/equipment.php");
                break;
        }
    }

    // 幻灯片图片渲染
    function getData(address) {
        let str = '';
        $.ajax({
            url: address,
            success: (res) => {
                const goodsListRes = JSON.parse(res);
                // 渲染页面
                goodsListRes.forEach(element => {
                    str += `
                    <li data-index="${element.Id - 1}">
                    <a href="javascript:;">
                        <img src="${element.minImg}" alt="">
                    </a>
                </li>`;
                });
                $(".modalBox_main_bottom_list").html(str);
                
                // 将数据暴露出去
                window.goodsListRes = goodsListRes;
            }
        })
    }
    // 商品列表渲染
    function ajax(address) {
        let getUrl = address || "../php/goodslist.php";
        let str = '';
        $.ajax({
            url: getUrl,
            success: (res) => {
                const goodsList = JSON.parse(res);
                // 渲染页面
                goodsList.forEach(element => {
                    str += `
                    <li data-goodsId = "${element.goodsId}">
                        <a href="javascript:;" >
                            <img src="${element.goodsImg}" alt="">
                            <span>${element.goodsTit}</span>
                        </a>
                    </li> `;
                });
                if (!address) $(".content_r_goods_list").html(str);
                // 执行页码渲染
                new page({
                    prev:$(".paging-prev"),                     // 上一页的标签
                    next:$(".paging-next"),                     // 下一页的标签
                    pageCont:$(".pageing-list"),                // 页码的容器
                    data:goodsList,                                                  // 数据
                    num:9,                                                           // 单页数据条数
                    index:0,                                                          // 默认显示第几页
                    cont:$(".content_r_goods_list")
                })
            }
        });
    };
    ajax();
    // 暴露方法 方便下次调用
    window.index = index;
})();